<template>
    <div class="c-leaveapply-form">
        <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="请假人">
                <el-input v-model="form.userId" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="类型">
                <el-input v-if="step!=='modifyapply' && step!=='addleave'" v-model="form.leaveType" :disabled="canNotEdit"></el-input>
                <el-select v-else v-model="form.leaveType">
                    <el-option v-for="(leaveType, i) in leaveTypeList" :label="leaveType" :value="leaveType" :key="i"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="起始时间">
                <el-input v-if="step!=='modifyapply' && step!=='addleave'" v-model="form.startTime" :disabled="canNotEdit"></el-input>
                <el-date-picker v-else type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" v-model="form.startTime" style="width: 100%;"></el-date-picker>
            </el-form-item>

            <el-form-item label="结束时间">
                <el-input v-if="step!=='modifyapply' && step!=='addleave'" v-model="form.endTime" :disabled="canNotEdit"></el-input>
                <el-date-picker v-else type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" v-model="form.endTime" style="width: 100%;"></el-date-picker>
            </el-form-item>

            <el-form-item label="原因">
                <el-input v-model="form.reason" :disabled="canNotEdit"></el-input>
            </el-form-item>

            <el-form-item label="部门领导" v-if="showDeptLeader">
                <el-select v-model="form.hr">
                    <el-option
                        v-for="(leader, i) in deptLeaderList"
                        :key="i"
                        :label="leader.name"
                        :value="leader.name"
                    ></el-option>
                </el-select>
            </el-form-item>

            <!-- 审批模块 -->
            <template v-if="step==='deptleadercheck' || step==='hrcheck'">
                <el-form-item label="审批结果">
                    <el-radio-group v-model="form.resource">
                        <el-radio label="true">同意</el-radio>
                        <el-radio label="false">拒绝</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="审批意见">
                    <el-input type="textarea" v-model="form.comment"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button type="danger" @click="cancel" v-if="step!=='destroyapply'">撤销</el-button>
                    <el-button type="warning" @click="reject" v-if="step!=='destroyapply'">驳回</el-button>
                </el-form-item>
            </template>

            <!-- 销假 -->
            <template v-if="step==='destroyapply'">
                <el-form-item label="实际起始时间">
                    <el-date-picker v-model="form.realityStartTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="实际结束时间">
                    <el-date-picker v-model="form.realityEndTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择时间"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                </el-form-item>
            </template>

            <!-- 新增请假 -->
            <template v-if="step==='addleave'">
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button type="danger" @click="cancel">撤销</el-button>
                </el-form-item>
            </template>

            <!-- 修改申请 -->
            <template v-if="step==='modifyapply'">
                <el-form-item label="是否重新申请">
                    <el-radio-group v-model="form.reapply">
                        <el-radio label="true">是</el-radio>
                        <el-radio label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                </el-form-item>
            </template>
        </el-form>
    </div>
</template>

<script>
import { listUser } from "@/api/system/user.js";
import { getDeptLeader } from "@/api/system/dept";
import axios from "axios";

const stepMap = {
    addleave: "addleave",
    modifyapply: "modifyapply",
    deptleadercheck: "deptleaderapprove",
    hrcheck: "hrapprove",
    destroyapply: "destroyapply",
};

export default {
    props: {
        step: {
            type: String,
            default: ""
        },
        formInfo: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            form: {
                reapply: "true",
                resource: "true",
                realityStartTime: "",
                realityEndTime: "",
                userId: "",
                endTime: "",
                startTime: "",
                reason: "",
                leaveType: "",
                comment: "",
                hr: "",
                deptleader:"",
              daytime:0
            },
            leaveTypeList: ["事假", "病假", "年假", "丧假", "婚假"],
            userList: [],
            deptLeaderList: [],
            showDeptLeader: false,
            daytime:0,
        };
    },
    computed: {
        canNotEdit() {
            return this.step !== "addleave" && this.step !== "modifyapply";
        }
    },
    watch: {
        formInfo(newVal) {
            Object.assign(this.form, newVal);
            this.updateShowDeptLeader();
        },
        'form.startTime': 'updateShowDeptLeader',
        'form.endTime': 'updateShowDeptLeader'
    },
    mounted() {
      this.updateShowDeptLeader();
        listUser().then(res => {
            this.userList = res.rows;
        });
    },
    methods: {
        updateShowDeptLeader() {
          debugger
            const start = new Date(this.form.startTime);
            console.log("开始时间"+start);
            const end = new Date(this.form.endTime);
            console.log("结束时间"+end);
            console.log("step:", this.step);
            if (this.step === 'deptleadercheck' && !isNaN(start) && !isNaN(end)) {
                const diff = (end - start) / (1000 * 60 * 60 * 24);
                console.log("diff"+diff);
                this.daytime =diff;
                this.form.daytime =diff;
                console.log("daytime"+this.daytime);
                this.showDeptLeader = diff > 5;
                if (this.showDeptLeader && this.deptLeaderList.length === 0) {
                    this.fetchDeptLeader();
                }
            } else if(this.step==='modifyapply'){
                this.fetchDeptLeader();
            }else {
                this.showDeptLeader = false;
            }
        },
        async fetchDeptLeader() {
            const deptId = this.$store.state.user.deptId;
            console.log("当前用户的 deptId 是：", deptId);

           
            console.log("最终赋值给表单的部门领导是：", this.form.hr);
            if (!deptId) {
                this.$message.error("当前用户部门ID为空，无法获取部门领导信息");
                return;
            }


            try {
                const res = await getDeptLeader({ deptId });
                console.log("接口返回的内容是：", res);
                if (res && res.msg) {
                    this.deptLeaderList = [{ name: res.msg }];
                    console.log("step:", this.step);
                    if( this.step==='modifyapply'){
                        this.form.deptleader = res.msg;
                    }else{
                        this.form.hr = res.msg;
                    }
                } else {
                    this.$message.error("无法获取部门领导信息");
                }
            } catch (e) {
                this.$message.error("请求部门领导失败");
                console.error(e);
            }
        },
        onSubmit() {
            this.$emit("submit", {
                ...this.form,
                [stepMap[this.step]]: this.form.resource
            });
        },
        reject() {
            this.$emit("reject");
        },
        cancel() {
            this.$emit("cancel");
        }
    }
};
</script>

<style scoped>
.c-leaveapply-form {
    padding: 20px;
}
</style>
